<template>
	<view class="create">
		<view class="select-tab">
			<view class="tabs" style="width: 60%; margin: 0 auto;background: #fff;">
				<v-tabs v-model="activeTab"  :tabs="cateList"  @change="changeTab" :scroll="false" activeColor="#0068ff" lineColor="#0068ff" lineHeight="3px" height="90rpx" />
			</view>
		</view>
			<!-- 创作诗歌 -->
			<view class="poem" v-if="activeTab == 0">
				<form @submit.stop="formSubmit" @reset="">
					<input type="text" hidden name="cover" :value="images"  maxlength="-1"/>
					<view class="upload-images-area">
						<!-- 展示封面 -->
						<view class="images-area" >
							<view class="image-item" v-if="images"   @click="viewImage" :data-url="images" :key="index" >
								<image :src="images" mode="aspectFill"></image>
								<view class="delete-icon" @tap.stop="delImg" :data-index="index">
									<image src="/static/images/post/delete-image.svg" mode=""></image>
								</view>
							</view>
							<!-- 上传封面 -->
							<view class="upload" @tap="chooseImages" v-if="images.length < 1">
								<image src="/static/images/post/upimage.svg" mode=""></image>
								<view class="up-cover-desc">上传封面</view>
							</view>
						</view>
					</view>
					<view class="p-title">
						<view class="title-tip">诗歌/诗论/诗词的标题</view>
						<input type="text" name="name" :value="name" placeholder="请输入标题" class="cirname" maxlength="20"/>
					</view>
					<view class="p-title">
						<view class="title-tip">笔名</view>
						<input type="text" name="p_name" :value="p_name" placeholder="请输入笔名" class="cirname" maxlength="20"/>
					</view>
					<view class="intro">
						<view class="cir-desc">诗歌简介</view>
						<textarea placeholder="请输入本圈简介~" class="cir-textarea" cols="40" rows="40" maxlength="120"  name="intro"  v-model="val">
						</textarea>
						<view class="count">
							<p :class="{'remnant':remnant!=0,'zero':remnant==120}">{{remnant}}</p>
							<view class="">/120</view>
						</view>
					</view>
					<view class="poem-paragraph" v-for="(item,index) in lists" :key="index">
						<view class="cir-desc">诗歌第{{index+1}}段</view>
						<textarea placeholder="请输入诗歌内容~" class="cir-textarea" cols="30" rows="30" maxlength="120"  :name="'para' + index"  v-model="lists[item]">
						</textarea>
					<!-- 	<view class="count">
							<p :class="{'remnant':remnant!=0,'zero':remnant==120}">{{paragraph}}</p>
							<view class="">/120</view>
						</view> -->
					</view>
					<view class="paragraph" @tap="addPoemPara">添加段落</view>
					<button class="report" form-type="submit">发表</button>
				</form>
			</view>
			<!-- 创作诗歌 -->
			
			<!-- 创作文章 -->
			<view class="article"  v-if="activeTab == 1">
				<form @submit="createArticle" @reset="">
					<input type="text" hidden name="body" :value="JSON.stringify(artList) "  maxlength="-1"/>
					<input type="text" hidden name="art_cover" :value="art_cover"  maxlength="-1"/>
					<view class="upload-images-area">
						<!-- 展示封面 -->
						<view class="images-area" >
							<view class="image-item" v-if="art_cover"   @click="prevArtImg(art_cover)" :data-url="art_cover" :key="index" >
								<image :src="art_cover" mode="aspectFill"></image>
								<view class="delete-icon" @tap.stop="delArtCover" :data-index="index">
									<image src="/static/images/post/delete-image.svg" mode=""></image>
								</view>
							</view>
							<!-- 上传封面 -->
							<view class="upload" @tap="chooseImages('art_cover')" v-if="art_cover.length < 1">
								<image src="/static/images/post/upimage.svg" mode=""></image>
								<view class="up-cover-desc">上传封面</view>
							</view>
						</view>
					</view>
					<view class="p-title">
						<view class="title-tip">文章标题</view>
						<input type="text" name="art_name" :value="name" placeholder="请输入文章标题" class="cirname" maxlength="20"/>
					</view>
					<view class="intro">
						<view class="cir-desc">文章简介</view>
						<textarea placeholder="请输入文章简介~" class="cir-textarea" cols="30" rows="30" maxlength="120"  name="art_intro"  v-model="art_val">
						</textarea>
						<view class="count">
							<p :class="{'remnant':artremnant!=0,'zero':artremnant==120}">{{artremnant}}</p>
							<view class="">/120</view>
						</view>
					</view>
					<view class="show-area" v-for="(item,index) in artList" :key="index">
						<view class="upload-images-area" v-if="item.type == 'image'">
							<!-- 展示图片 -->
							<view class="images-area" >
								<view class="image-item" v-if="item.data"   @click="prevArtImg(item.data)" :data-url="item.data" :key="index" >
									<image :src="item.data" mode="aspectFill"></image>
									<view class="delete-icon" @tap.stop="delArtImg(index)" :data-index="index">
										<image src="/static/images/post/delete-image.svg" mode=""></image>
									</view>
								</view>
							</view>
						</view>
						<!-- 展示文本段落 -->
						<view class="poem-paragraph" v-if="item.type == 'content'">
							<!-- <view class="cir-desc">诗歌第{{index+1}}段</view> -->
							<textarea placeholder="请输入内容~" class="cir-textarea" cols="30" rows="30" maxlength="120"  :name="'artPara' + index"  v-model="item.data"></textarea>
						<!-- 	<view class="count">
								<p :class="{'remnant':remnant!=0,'zero':remnant==120}">{{paragraph}}</p>
								<view class="">/120</view>
							</view> -->
						</view>
					</view>
					
					
					<!-- 上传图片 -->
					<!-- <view class="upload" @tap="chooseImages">
						<image src="/static/images/post/upimage.svg" mode=""></image>
						<view class="up-cover-desc">上传封面</view>
					</view> -->
					<view class="addImg" @tap="chooseImages">添加图片</view>
					<view class="paragraph" @tap="addcontent">添加文本</view>
					<button class="report" form-type="submit">发表</button>
				</form>
			</view>
			<!-- 创作文章 -->
			
			
			<!-- 创作小说 -->
			<view class="novel" v-if="activeTab == 2">
				<form @submit.stop="createNovel" @reset="">
					<input type="text" hidden name="nov_cover" :value="nov_cover"  maxlength="-1"/>
					<view class="upload-images-area">
						<!-- 展示封面 -->
						<view class="images-area" >
							<view class="image-item" v-if="nov_cover"   @click="viewNovCover" :data-url="nov_cover" :key="index" >
								<image :src="nov_cover" mode="aspectFill"></image>
								<view class="delete-icon" @tap.stop="delNovCover" :data-index="index">
									<image src="/static/images/post/delete-image.svg" mode=""></image>
								</view>
							</view>
							<!-- 上传封面 -->
							<view class="upload" @tap="chooseImages" v-if="nov_cover.length < 1">
								<image src="/static/images/post/upimage.svg" mode=""></image>
								<view class="up-cover-desc">上传封面</view>
							</view>
						</view>
					</view>
					<view class="p-title">
						<view class="title-tip">小说名称</view>
						<input type="text" name="nov_name" :value="n_name" placeholder="请输入小说名称" class="cirname" maxlength="20"/>
					</view>
					<view class="p-title">
						<view class="title-tip">笔名</view>
						<input type="text" name="nov_p_name" :value="n_p_name" placeholder="请输入笔名" class="cirname" maxlength="20"/>
					</view>
					<view class="intro">
						<view class="cir-desc">小说简介</view>
						<textarea placeholder="请输入本圈简介~" class="cir-textarea" cols="30" rows="30" maxlength="120"  name="nov_intro"  v-model="nval">
						</textarea>
						<view class="count">
							<p :class="{'remnant':nremnant!=0,'zero':nremnant==120}">{{nremnant}}</p>
							<view class="">/120</view>
						</view>
					</view>
					<button class="report" form-type="submit">发表</button>
				</form>
			</view>
			<!-- 创作小说 -->
			

	</view>
</template>

<script>
	import api from '../../../common/api.js'
	import graceChecker from '../../../common/graceChecker.js'
	
	export default {
		data() {
			return {
				activeTab:'',
				cateList:[{name:'诗歌'},{name:'文章'},{name:'小说'}],
				upload_api: this.uploadApi ,//图片上传url
				images:'',	//诗歌封面图
				lists:[],
				repost:1,
				nextId:0,
				val: "",       //诗歌简介字数
				paragcourt:"" ,//段落内容字数
				
				nov_cover:'',  //小说封面
				nval:''     ,//小说简介字数
				
				art_cover:'',
				art_body:'',
				artList:[],
				art_val:'',
				art_body_order:0
			}
		},
		computed: {
			remnant(e) {//实时记录诗歌简介字数
				return  this.val.length;
			},
			artremnant(e) {//实时记录诗歌简介字数
				return  this.art_val.length;
			},
			nremnant(e) {//实时记录小说简介字数
				return  this.nval.length;
			},
			paragraph(value) {
				return function(value) {
				return this.value.length
				}
			}
		},
		onLoad(p) {
			this.activeTab = p.activeTab
		},
		methods:{
			
			changeTab(e) {
				this.activeTab = e
			},
			
			// 诗歌创建操作
			async formSubmit(e) {//表单提交
				var  arr  = []
				var pattern = /^para.*/
				
				for(let item in e.detail.value) {
					if(pattern.test(item) ){
						// obj[item] = e.detail.value[item] 
						console.log(item);
						arr.push({para:e.detail.value[item]})
					}
				}
				console.log(arr);
				if(!this.repost) {
					uni.showToast({ title: '勿重复提交 ', icon: "none" });
					return 
				}
				
				
				var rule = [
					{name:"cover", checkType : "notnull", errorMsg:"请上传诗歌封面"},
					{name:"name", checkType : "notnull", errorMsg:"请输入诗歌名称"},
					{name:"p_name", checkType : "notnull", errorMsg:"请输入笔名"},
					{name:"intro", checkType : "notnull", errorMsg:"请输入诗歌简介"},
				];
				//进行表单检查
				var checkRes = graceChecker.check(e.detail.value, rule);
				if(!checkRes){
					uni.showToast({ title: graceChecker.error, icon: "none" });
					return 
				}
				if(arr.length == 0) {
					uni.showToast({ title: '诗歌内容不能为空 ', icon: "none" });
					return
				}else {
					for(var obj of arr) {
						console.log(obj);
						for(var key in obj) {
							if(!obj[key]) {
								console.log('-----------');
								uni.showToast({ title: '诗歌内容不能为空 ', icon: "none" });
								return
							}
						}
							
					}
				}
				
				this.repost = 0 
				uni.showLoading({
					title:'提交中'
				});
				
				let {name,p_name,intro} = e.detail.value
				let jbody = JSON.stringify(arr)
				let res = await api.CreatePoem(name,p_name,intro,this.images,jbody)
				console.log(res);
				if(res.err == 0)  {
					uni.hideLoading()
					uni.showToast({
						title:res.msg
					})
					setTimeout(() => {
						uni.navigateBack({
							delta:1
						})
					},700)
				}
			},
			
			// 文章创建操作
			async createArticle(e) {
				console.log(e.detail.value);	
				// if(!this.repost) {
				// 	uni.showToast({ title: '勿重复提交 ', icon: "none" });
				// 	return 
				// }
				let {art_name,body,art_cover,art_intro} = e.detail.value
				let jbody = JSON.parse(body)
				
				console.log(art_name,body,art_cover,art_intro);
				let rule = [
					{name:"art_cover", checkType : "notnull", errorMsg:"文章封面不能为空"},
					{name:"art_name", checkType : "notnull", errorMsg:"文章标题不能为空"},
					{name:"art_intro", checkType : "notnull", errorMsg:"文章简介不能为空"},
					{name:"body", checkType : "notnull", errorMsg:"文章内容不能为空"},
				];
				//进行表单检查
				let checkRes = graceChecker.check(e.detail.value, rule);
				if(!checkRes){
					uni.showToast({ title: graceChecker.error, icon: "none" });
					return 
				}
				if(jbody.length === 0) {
					uni.showToast({ title: '文章内容不能为空', icon: "none" });
					return
				}else {
					for(var obj of jbody) {
						console.log(obj);
							if(!obj['data']) {
								console.log('-----------');
								uni.showToast({ title: '文本内容不能为空 ', icon: "none" });
								return
							}
					}
				}
				
				this.repost = 0 
				uni.showLoading({
					title:'提交中'
				});
				
				let res = await api.CreateArticle(art_cover,art_name,art_intro,body)
				console.log(res);
				if(res.err == 0)  {
					uni.hideLoading()
					uni.showToast({
						title:res.msg
					})
					setTimeout(() => {
						uni.navigateBack({
							delta:1
						})
					},700)
				}
			},
			
			// 小说创建操作
			async createNovel(e) {
				console.log(e.detail.value);
				if(!this.repost) {
					uni.showToast({ title: '勿重复提交 ', icon: "none" });
					return 
				}
				var rule = [
					{name:"nov_cover", checkType : "notnull", errorMsg:"请上传小说封面"},
					{name:"nov_name", checkType : "notnull", errorMsg:"请输入小说名称"},
					{name:"nov_p_name", checkType : "notnull", errorMsg:"请输入作者笔名"},
					{name:"nov_intro", checkType : "notnull", errorMsg:"请输入小说简介"},
				];
				//进行表单检查
				var checkRes = graceChecker.check(e.detail.value, rule);
				if(!checkRes){
					uni.showToast({ title: graceChecker.error, icon: "none" });
					return 
				}
				
				this.repost = 0 
				uni.showLoading({
					title:'提交中'
				});
				var {nov_cover,nov_name,nov_p_name,nov_intro} = e.detail.value
				var res = await api.CreateNovel(nov_name,nov_p_name,nov_intro,nov_cover)
				console.log(res);
				if(res.err == 0)  {
					uni.hideLoading()
					uni.showToast({
						title:res.msg
					})
					setTimeout(() => {
						uni.navigateBack({
							delta:1
						})
					},700)
				}
			},
			
			addPoemPara() {//添加诗歌段落
				this.lists.push({})
			},
			
			addcontent() {//添加文章段落
				let artList = this.artList
				artList.push({
					order:++this.art_body_order,
					type:'content',
					data:''
				})
			},
			
			viewImage(e) {//预览诗歌封面
				uni.previewImage({
					urls: [this.images],
					current: e.currentTarget.dataset.url
				});
			},
			
			prevArtImg(img) {//预览文章图片
				uni.previewImage({
					urls: [img],
					current: [img]
				});
			},
			
			viewNovCover(e) {//预览小说封面
				uni.previewImage({
					urls: [this.nov_cover],
					current: e.currentTarget.dataset.url
				});
			},
			
			delArtImg(index) {//删除文章图片
			console.log(index);
				this.artList.splice(index,1)
			},
			delArtCover() {//删除文章封面
				this.art_cover = ''
			},
			delImg(e) {//删除诗歌封面
				this.images = ''
			},
			
			delNovCover() {//删除小说封面
				this.nov_cover = ''
			},
			
			chooseImages(flag) {//上传相集images
					var _self = this
					uni.chooseImage({
						count:1,//默认1
						sizeType: ['original','compressed'], //可以指定是原图还是压缩图，默认二者都有 'original', 'compressed'
						sourceType: ['album','camera'],  //从相册选择或者拍照 'album','camera'
						success: (res) => {
							console.log(res);
							res.tempFilePaths.forEach((item,index)=>{
								uni.showLoading({title:"上传中"});
								var uploadTask = uni.uploadFile({
									url: _self.upload_api,
									// url:'http://bbtest.test/api/upload',
									filePath: item,
									fileType: 'image',
									name: 'file',
									dataType: 'json',
									success: function (uploadFileRes) {
										// 上传成功后返回服务器端保存的路径
										var jsondata = JSON.parse(uploadFileRes.data)
										if( jsondata.err ==0 ){
											if(_self.activeTab == 0) {
												_self.images = jsondata.file_path
											}else if(_self.activeTab === 1) {
												if(flag == 'art_cover') {
													_self.art_cover = jsondata.file_path	
													console.log('art_cover');
													
												}else {
													_self.artList.push({order:++_self.art_body_order,type:'image','data':jsondata.file_path})
													console.log('body');
												}
											}
											else if(_self.activeTab == 2) {
												_self.nov_cover = jsondata.file_path
											}
											uni.hideLoading();
											uni.showToast({
												title: jsondata.msg,
												duration:800
											})
										}else{
												uni.showToast({
													title:jsondata.msg,
													icon:'none'
												})
											}
										}
								 });
							})
						}
					});
			},
		}
	}
</script>

<style lang="scss">
	
.select-tab {
	width: 750rpx;
	top: 0;
	height: 90rpx;
	position: fixed;
	z-index: 99;
	background-color: #ffffff;
	background-color: #fff;
	border-bottom: 4rpx solid #F3F6F5;
}
.poem,.novel,.article {
	margin-top: 110rpx;
	// height: 100vh;
	padding: 20rpx 30rpx;
	background-color: #fff;
	.p-title{
		padding: 10rpx 0;
		.title-tip {
			margin: 15rpx 10rpx;
		}
		input {
			font-size: 28rpx;
			border: 2rpx solid #F3F6F5;
			margin: 10rpx 0;
			background: rgba(246,247,249,0.9);
			border-radius: 15rpx;
		  padding: 20rpx 30rpx;
		}
	}
}
.novel {
	margin-top: 110rpx;
	padding: 20rpx 30rpx;
	background-color: #fff;
}
.paragraph,.addImg {
	background-color: rgba(226,238,254,.9);
	color: #1472FE;
}
.addImg {
	margin: 70rpx 80rpx 30rpx;
}
.report {
	background-color: #1a77fe;
	color: #fff;
	margin: 30rpx 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 82rpx;
	border-radius: 10rpx;
}
.paragraph {
	margin: 30rpx  80rpx;
}
.paragraph,.addImg {
	padding: 15rpx 0;
	border-radius: 10rpx;
	padding: 15rpx 0;
	text-align: center;
	
	height: 55rpx;
	line-height: 55rpx;
}
.poem-paragraph {
	margin-top: 40rpx;
}
.intro,.poem-paragraph {
	position: relative;
	font-size: 32rpx;
	background-color: #fff;
	.cir-desc {
		margin: 10rpx;
	}
	.cir-textarea {
		border: 2rpx solid #F3F6F5;
		margin: 10rpx 0;
		background: rgba(246,247,249,0.5);
		border-radius: 15rpx;
		line-height: 34rpx;
		font-size: 32rpx;
	}
	.count {
		display: flex;
		position: absolute;
		right: 20rpx;
		bottom: 25rpx;
		color: #999;
		.remnant {
			color: #999;
		}
		.zero{
			color: #FF0000;
		}
	}
	textarea {
		height: 280rpx;
		width: 650rpx;
		padding: 20rpx;
		font-size: 28rpx;
	}
}
.upload {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 220rpx;
	height: 210rpx;
	margin-bottom: 10rpx;
	border-radius: 10rpx;
	border: 1rpx solid #F3F6F5;
	background: rgba(245,245,245,.8);
	.up-cover-desc {
		position: absolute;
		width: 220rpx;
		text-align: center;
		// left: 0;
		// right: 0;
		// margin: 0 auto;
		color: #FFFFFF;
		background-color:rgba(122,122,122,.8);
		bottom: 0;
		border-bottom-left-radius: 10rpx;  
		border-bottom-right-radius: 10rpx; 
	}
	image {
		width: 60%;
		height: 58%;
	}
}
.upload-images-area {
	/* width: 750rpx;
	margin: 0 auto;
	height: 1000rpx; */
	display: flex;
	justify-content: center;
	padding: 0 15rpx;
	
	.images-area {	
		display: flex; 
		flex-wrap: wrap;
		// width: 700rpx;
		box-sizing: border-box;
		.image-item {
			position: relative;
			width: 220rpx;
			height: 210rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
			border-radius: 10rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
			.delete-icon {
				position: absolute;
				right: 5rpx;
				top: 5rpx;
				image {
					width: 45rpx;
					height: 45rpx;
					// background: rgba(0,0,0,.2);
				}
			}
		}
		
	}
}
</style>
